<template>
<div>
  <div :style="{height:height+'px',width:width+'px'}" class="menu-wrapper">
    <div class="menu-title">
      <div class="title-line"></div>
      <div 
        :title="title" 
        :style="{'font-size': $attrs.fontSize,'font-weight' : $attrs.bold ? 'bold' : 'normal','font-style': $attrs.italic ? 'italic' : 'normal','text-decoration': $attrs.underline ? 'underline' : 'none','text-align': `${$attrs.textAlign}`,'color': `${$attrs.fontColor}`,'line-height': `${$attrs.lineHeight}`}"  
        class="title-content"
      >{{title}}</div>
    </div>
    <div class="menu-box">
      <div class="menu-item" v-for="item in menus.sort((a,b)=>{return a.sortId - b.sortId})"
        :style="{background:item.backColor}" @click="jumpToPage(item.jumpTo)">
        <div :style="{background:item.iconBackColor,borderRadius:'50%'}">
          <svg-icon :icon-class="item.icon" class-name="menu-icon" :style="{color:item.iconColor}" />
        </div>
        <div :title="item.funcName" class="menu-text">{{item.funcName}}</div>
      </div>
    </div>
  </div>
  <div style="width:100%;height:20px;"></div>
  </div>
</template>
<script>
  import {
    getMenu
  } from '@/api/system/menu';
  import {getHomePage} from '@/api/login'
  export default {
    props: {
      width: { //宽度
        type: Number,
        default: '300'
      },
      height: { //高度
        type: Number,
        default: '100'
      },
      title: { //标题
        type: String,
        default: '快捷菜单'
      },
      menus: { //菜单配置
        type: Array,
      }
    },
    data() {
      return {

      }
    },
    methods: {
      //跳转
      async jumpToPage(url) {
        const flag = this.$store.state.currentStep.clickFlag
        if(flag){
          let toUrl = ''
          await getHomePage().then(res => {
            toUrl= res.data.path
          }).catch(error => {
            console.log(error)
          })
          let urls = []
          let res = null
          //根据菜单id获取完整path
          while(true){
            res = await getMenu(res?res.data.parentId:url)
            if (res.code === 0) {
              if (res.data) {
                urls.push(res.data.path)
                if (res.data.parentId === 0) {
                  break
                }
              } else {
                break
              }
            }
          }
          if(urls.length > 0) {
            toUrl = urls.reverse().join('/')
          }
          this.$router.push(toUrl)
        }
      },
    }
  }

</script>

<style lang="scss" scoped>
  .menu-wrapper {
    cursor: pointer;
    color: rgba(0, 0, 0, 0.45);
    font-size: 16px;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;

    .menu-title {
      width: 100%;
      height: 40px;
      line-height: 40px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);

      .title-line {
        margin: 0 10px;
        width: 5px;
        height: 20px;
        background: #409eff;
      }
      .title-content {
        width: 90%;
        overflow:hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }
    .menu-box {
      width: 100%;
      height: calc(100% - 40px);
      display: flex;
      align-items: center;
      justify-content: space-around;

      .menu-item {
        // border: 1px solid red;
        height: 100%;
        padding: 10px;
        display: flex;
        text-align: center;
        flex-direction: column;
        // justify-content: center;
        align-items: center;
        .menu-icon {
          float: left;
          font-size: 60px;
          padding: 10px;
          border-radius: 50%;
        }

        .menu-text {
          float: right;
          width: 200px;
          overflow:hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          font-weight: bold;
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
        }
      }
    }
  }



  

</style>
